import * as React from 'react';
import './books.css'
import Tabbar from '../tabbar';
import { SearchOutline } from 'antd-mobile-icons'
import sheng from '../../images/省略号.svg'
import { useNavigate } from 'react-router-dom';

const books = [
  {
    title: '电子书名',
    img: "../../images/书籍封面.png",
    ReadingProgress: "阅读进度"
  },
  {
    title: '电子书名',
    img: "https://img2.baidu.com/it/u=2539684690,1822193558&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500",
    ReadingProgress: "阅读进度"
  },
  {
    title: '电子书名',
    img: "https://img2.baidu.com/it/u=2539684690,1822193558&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500",
    ReadingProgress: "阅读进度"
  },
  {
    title: '电子书名',
    img: "https://img2.baidu.com/it/u=2539684690,1822193558&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500",
    ReadingProgress: "阅读进度"
  },

]
function Books() {
  let [is,setis] = React.useState(false)
  const navigate = useNavigate()
  let goschema = ()=>{
    navigate('/booksSchema')
  }
  let changeis = (boo)=>{
    console.log(1);
    setis(boo)
  }
  let go = ((path)=>{
    console.log(2);
    navigate(path)
  })
  return (
    <div className='books'>
      <div className='header'>
        <label>书架</label>
        <div>
          <SearchOutline fontSize={18} onClick={goschema}/>
        </div>
        <div className='sele' onClick={()=>{changeis(true)}}>
          <img src={sheng} />
        </div>
      </div>

      <div className='main'>
        {
          books.map((item,index) => {
            return (
              <div className='item' key={index}>
                <img src={require('../../images/书籍封面.png')} />
                <p>{item.title}</p>
                <p className='jindu'>{item.ReadingProgress}</p>
              </div>
            )
          })
        }
      </div>
      <div className='font'>
        <Tabbar />
      </div>
      {
        is?(
        <div className='mask' onClick={()=>{changeis()}} ontouchmove={(e)=>e.preventDefault()}  >
          <div className='popover'>
            <p onClick={()=>go('/booksScan')} ontouchmove={(e)=>e.preventDefault()}>扫一扫</p>
            <p onClick={()=>go()} ontouchmove={(e)=>e.preventDefault()}>阅读记录</p>
            <p onClick={()=>go()} ontouchmove={(e)=>e.preventDefault()}>我的书单</p>
            <div className='border'></div>
          </div>
        </div>
      ):(<></>)
      }
      
    </div>
  )
}

export default Books